<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志查询测试</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
        }
        input, select {
            width: 200px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .error {
            color: red;
        }
        .success {
            color: green;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>日志查询功能测试</h1>
    
    <div class="form-group">
        <label>操作人:</label>
        <input type="text" id="operatorName" placeholder="请输入操作人姓名">
    </div>
    
    <div class="form-group">
        <label>操作类型:</label>
        <select id="operationType">
            <option value="">请选择操作类型</option>
            <option value="LOGIN">登录</option>
            <option value="LOGOUT">登出</option>
            <option value="CREATE">创建</option>
            <option value="UPDATE">更新</option>
            <option value="DELETE">删除</option>
            <option value="QUERY">查询</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>模块:</label>
        <select id="module">
            <option value="">请选择模块</option>
            <option value="USER">用户管理</option>
            <option value="ROLE">角色管理</option>
            <option value="MENU">菜单管理</option>
            <option value="PERMISSION">权限管理</option>
            <option value="SYSTEM">系统设置</option>
            <option value="FILE">文件管理</option>
            <option value="LOG">日志管理</option>
            <option value="ARTICLE">文章管理</option>
            <option value="AUTH">认证管理</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>操作结果:</label>
        <select id="result">
            <option value="">请选择操作结果</option>
            <option value="SUCCESS">成功</option>
            <option value="FAILURE">失败</option>
            <option value="ERROR">异常</option>
            <option value="WARNING">警告</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>IP地址:</label>
        <input type="text" id="ipAddress" placeholder="请输入IP地址">
    </div>
    
    <div class="form-group">
        <label>开始时间:</label>
        <input type="datetime-local" id="startTime">
    </div>
    
    <div class="form-group">
        <label>结束时间:</label>
        <input type="datetime-local" id="endTime">
    </div>
    
    <div class="form-group">
        <label>页码:</label>
        <input type="number" id="page" value="1" min="1">
    </div>
    
    <div class="form-group">
        <label>页大小:</label>
        <input type="number" id="pageSize" value="20" min="1" max="100">
    </div>
    
    <button onclick="testQuery()">测试查询</button>
    <button onclick="clearForm()">清空表单</button>
    <button onclick="testWithMockData()">使用模拟数据测试</button>
    
    <div id="result" class="result" style="display: none;">
        <h3>查询结果:</h3>
        <div id="resultContent"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:5095';
        
        function getFormData() {
            return {
                operatorName: document.getElementById('operatorName').value,
                operationType: document.getElementById('operationType').value,
                module: document.getElementById('module').value,
                result: document.getElementById('result').value,
                ipAddress: document.getElementById('ipAddress').value,
                startTime: document.getElementById('startTime').value,
                endTime: document.getElementById('endTime').value,
                page: parseInt(document.getElementById('page').value) || 1,
                pageSize: parseInt(document.getElementById('pageSize').value) || 20
            };
        }
        
        function showResult(content, isError = false) {
            const resultDiv = document.getElementById('result');
            const resultContent = document.getElementById('resultContent');
            
            resultContent.innerHTML = content;
            resultContent.className = isError ? 'error' : 'success';
            resultDiv.style.display = 'block';
        }
        
        async function testQuery() {
            try {
                const formData = getFormData();
                
                // 构建查询参数
                const params = new URLSearchParams();
                Object.keys(formData).forEach(key => {
                    if (formData[key] !== '' && formData[key] !== null && formData[key] !== undefined) {
                        params.append(key, formData[key]);
                    }
                });
                
                console.log('查询参数:', formData);
                console.log('URL参数:', params.toString());
                
                const response = await axios.get(`${API_BASE_URL}/api/operationlog/list?${params.toString()}`, {
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${localStorage.getItem('token') || sessionStorage.getItem('token')}`
                    }
                });
                
                console.log('API响应:', response);
                
                if (response.data.success) {
                    const data = response.data.data;
                    displayResults(data);
                } else {
                    showResult(`API返回错误: ${response.data.message}`, true);
                }
            } catch (error) {
                console.error('查询失败:', error);
                showResult(`查询失败: ${error.message}<br>状态码: ${error.response?.status}<br>响应数据: ${JSON.stringify(error.response?.data, null, 2)}`, true);
            }
        }
        
        function displayResults(data) {
            const items = data.items || [];
            const totalCount = data.totalCount || 0;
            const pageIndex = data.pageIndex || 1;
            const pageSize = data.pageSize || 20;
            
            let html = `
                <p><strong>查询成功!</strong></p>
                <p>总记录数: ${totalCount}</p>
                <p>当前页: ${pageIndex}</p>
                <p>页大小: ${pageSize}</p>
                <p>返回记录数: ${items.length}</p>
            `;
            
            if (items.length > 0) {
                html += `
                    <table>
                        <thead>
                            <tr>
                                <th>操作时间</th>
                                <th>操作人</th>
                                <th>操作类型</th>
                                <th>模块</th>
                                <th>描述</th>
                                <th>结果</th>
                                <th>IP地址</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                items.forEach(item => {
                    html += `
                        <tr>
                            <td>${formatDateTime(item.operationTime || item.OperationTime)}</td>
                            <td>${item.operatorName || item.OperatorName}</td>
                            <td>${item.operationType || item.OperationType}</td>
                            <td>${item.module || item.Module}</td>
                            <td>${item.description || item.Description}</td>
                            <td>${item.result || item.Result}</td>
                            <td>${item.ipAddress || item.IpAddress}</td>
                        </tr>
                    `;
                });
                
                html += '</tbody></table>';
            } else {
                html += '<p>没有找到匹配的日志记录</p>';
            }
            
            showResult(html);
        }
        
        function formatDateTime(dateTime) {
            if (!dateTime) return '';
            return new Date(dateTime).toLocaleString('zh-CN');
        }
        
        function clearForm() {
            document.getElementById('operatorName').value = '';
            document.getElementById('operationType').value = '';
            document.getElementById('module').value = '';
            document.getElementById('result').value = '';
            document.getElementById('ipAddress').value = '';
            document.getElementById('startTime').value = '';
            document.getElementById('endTime').value = '';
            document.getElementById('page').value = '1';
            document.getElementById('pageSize').value = '20';
            document.getElementById('result').style.display = 'none';
        }
        
        function testWithMockData() {
            // 模拟API响应数据
            const mockData = {
                success: true,
                data: {
                    items: [
                        {
                            id: '1',
                            operatorName: 'admin',
                            operationType: 'LOGIN',
                            module: 'AUTH',
                            description: '用户登录',
                            result: 'SUCCESS',
                            ipAddress: '192.168.1.100',
                            operationTime: new Date().toISOString()
                        },
                        {
                            id: '2',
                            operatorName: 'user1',
                            operationType: 'CREATE',
                            module: 'USER',
                            description: '创建新用户',
                            result: 'SUCCESS',
                            ipAddress: '192.168.1.101',
                            operationTime: new Date(Date.now() - 3600000).toISOString()
                        }
                    ],
                    totalCount: 2,
                    pageIndex: 1,
                    pageSize: 20
                }
            };
            
            console.log('模拟数据:', mockData);
            displayResults(mockData.data);
        }
        
        // 页面加载时设置默认时间
        window.onload = function() {
            const now = new Date();
            const oneHourAgo = new Date(now.getTime() - 3600000);
            
            document.getElementById('startTime').value = oneHourAgo.toISOString().slice(0, 16);
            document.getElementById('endTime').value = now.toISOString().slice(0, 16);
        };
    </script>
</body>
</html> 